﻿<!DOCTYPE html>
<html>
<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>Homepage - Semantic</title>
    <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/site.css">

    <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">

    <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/button.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/sidebar.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/transition.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/form.min.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/modal.css">
    <link rel="stylesheet" type="text/css" href="../dist/components/dimmer.css">
    <link rel="stylesheet" type="text/css" href="../dist/My97DatePicker/skin/WdatePicker.css">

    <style type="text/css">
        .test {
         display:none;
        }

        .hidden.menu {
            display: none;
        }

        .masthead.segment {
            min-height: 700px;
            padding: 1em 0em;
        }

        .masthead .logo.item img {
            margin-right: 1em;
        }

        .masthead .ui.menu .ui.button {
            margin-left: 0.5em;
        }

        .masthead h1.ui.header {
            margin-top: 3em;
            margin-bottom: 0em;
            font-size: 4em;
            font-weight: normal;
        }

        .masthead h2 {
            font-size: 1.7em;
            font-weight: normal;
        }

        .ui.vertical.stripe {
            padding: 8em 0em;
        }

            .ui.vertical.stripe h3 {
                font-size: 2em;
            }

            .ui.vertical.stripe .button + h3,
            .ui.vertical.stripe p + h3 {
                margin-top: 3em;
            }

            .ui.vertical.stripe .floated.image {
                clear: both;
            }

            .ui.vertical.stripe p {
                font-size: 1.33em;
            }

            .ui.vertical.stripe .horizontal.divider {
                margin: 3em 0em;
            }

        .quote.stripe.segment {
            padding: 0em;
        }

            .quote.stripe.segment .grid .column {
                padding-top: 5em;
                padding-bottom: 5em;
            }

        .footer.segment {
            padding: 5em 0em;
        }

        .secondary.pointing.menu .toc.item {
            display: none;
        }

        @media only screen and (max-width: 700px) {
            .ui.fixed.menu {
                display: none !important;
            }

            .secondary.pointing.menu .item,
            .secondary.pointing.menu .menu {
                display: none;
            }

            .secondary.pointing.menu .toc.item {
                display: block;
            }

            .masthead.segment {
                min-height: 350px;
            }

            .masthead h1.ui.header {
                font-size: 2em;
                margin-top: 1.5em;
            }

            .masthead h2 {
                margin-top: 0.5em;
                font-size: 1.5em;
            }
        }
    </style>

    <script src="../dist/jquery.min.js"></script>
    <script src="../dist/components/visibility.js"></script>
    <script src="../dist/components/sidebar.js"></script>
    <script src="../dist/components/transition.js"></script>
    <script src="../dist/components/dropdown.js"></script>
    <script src="../dist/components/form.min.js"></script>
    <script src="../dist/components/modal.js"></script>
    <script src="../dist/components/dimmer.js"></script>
    <script src="../dist/My97DatePicker/WdatePicker.js"></script>

    <script>
        $(document)
            .ready(function () {
                $('.ui.dropdown') .dropdown()
                // fix menu when passed
                $('.masthead')
                    .visibility({
                        once: false,
                        onBottomPassed: function () {
                            $('.fixed.menu').transition('fade in');
                        },
                        onBottomPassedReverse: function () {
                            $('.fixed.menu').transition('fade out');
                        }
                    })
                    ;

                // create sidebar and attach to menu open
                $('.ui.sidebar')
                    .sidebar('attach events', '.toc.item')
                    ;

                $('.ui.form')
                    .form({
                        fields: {
                            reservationServerType: 'empty',
                            reservationTime: 'empty', 
                            reservationName: ['minLength[2]', 'empty'],
                            reservationPhoneNo: ['minLength[11]', 'maxLength[11]', 'empty','integer'],
                            reservationAddress: ['minLength[6]', 'empty']
                        }
                    })
                    ;
                if ($('.ui.form').form('is valid', 'reservationTime')) {
                    alert("验证成功了吗？");
                }
                var isWaitting = 0;
                $(".submit").click(function () {
                    if ($('.ui.form').form('is valid')) {
                        // form is valid (both email and name)
                        console.log("验证成功，能提交");
                        //获取所有的form表单数据，组织数据请求数据接口
                       // var formData = $('.ui.form').form().serialize();
                        var $form = $('.ui.form'),
                            // get one value
                            reservationTime = $form.form('get value', 'reservationTime'),
                            // get list of values
                            fields = $form.form('get values', ['reservationServerType', 'reservationName']),
                            // get all values
                            allFields = $form.form('get values');
                       
                        if (isWaitting == 0) {                            isWaitting = 1;                            $.ajax({
                                url: "http://www.u-jz.com/api/services/app/jiuYiBaSuoYe/Save_yichushouna_Data",
                                type: "POST",
                                dataType: "text",
                                headers: {
                                    Accept: "application/json; charset=utf-8"
                                },
                                contentType: "application/json",
                                cache: false,
                                async: false,
                                data: JSON.stringify(allFields),
                                success: function (data) {
                                    if (data == '"1"') {
                                        $form.form('reset');
                                        $('#miniFail').modal('show');
                                    }
                                },
                                timeout: 1200,
                                error: function (a, e) {
                                    console.log("page PayMent Exception");
                                },
                                complete: function () {
                                    isWaitting = 0;
                                }
                            });                        }

                    } else {
                        console.log("验证失败，不能提交");
                        $('#miniFail').modal('show');
                    }
                });


            });
        ;
    </script>
</head>
<body>

    <!--Header-->
    <%template src="_header.html"%>
    <!--/Header-->
    <!-- Page Contents -->
    <div class="pusher">
        <div class="ui inverted vertical masthead center aligned segment">

            <!--Menu-->
            <%template src="_menu.html"%>
            <!--/Menu-->

            <div class="ui text container">
                <h1 class="ui inverted header">
                    整理界，我们帮助您整理您的世界
                </h1>
                <h2>让您在井井有条的世界里享受快乐</h2>
                <div class="ui huge primary button">请整理师 <i class="right arrow icon"></i></div>
            </div>

        </div>

        <h3 class="ui center  aligned header">在线预约收纳服务</h3>
        <div class="ui text container center"> 
                <form  class="ui form stacked  segments">
                    <div class="ui segment">
                        <div class="inline fields">
                            <label>预约服务</label>
                            <div class="ten wide field">
                                <select class="search dropdown" name="reservationServerType">
                                    <option value="衣橱收纳整理">衣橱收纳整理</option>
                                    <option value="全屋整理">全屋整理</option>
                                    <option value="搬家整理">搬家整理</option>
                                    <option value="工作室整理">工作室整理</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="ui  segment">
                        <div class="inline fields">
                            <label>预约时间</label>
                            <div class="ten wide field">
                                <input type="text" name="reservationTime" placeholder="期望服务时间" class="Wdate"
                                       onclick="WdatePicker({dateFmt:'yyyy年M月d日 H时m分',minTime:'09:00:00',maxTime:'17:30:00'})">
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <div class="inline fields">
                            <label>您的姓名</label>
                            <div class="ten wide field">
                                <input type="text" name="reservationName" placeholder="联系姓名">
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <div class="inline fields">
                            <label>联系电话</label>
                            <div class="ten wide field">
                                <input type="text" name="reservationPhoneNo" placeholder="您的联系电话">
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <div class="inline fields">
                            <label>服务地址</label>
                            <div class="ten wide field">
                                <input type="text" name="reservationAddress" placeholder="您的服务地址">
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <div class="inline fields">
                            <label>备注说明</label>
                            <div class="ten wide field">
                                <textarea placeholder="可以说明您的特殊要求或者其他说明" name="reservationRemark"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <div class=" ui segment center aligned basic "> 
                            <div class="ui primary submit button">提交</div>
                            <div class="ui reset button">重置</div> 
                        </div>
                    </div>
                </form> 
        </div>




        <!--Footer-->
        <%template src="_footer.html"%>
        <!--/Footer-->
    </div>

    <div class="ui mini test modal" id="miniSuccess">
        <div class="header">
            操作提示
        </div>
        <div class="content">
            <p>预约已经成功！感谢您选择我们，我们会尽快联系您！</p>
        </div>
        <div class="actions">
            
            <div class="ui positive right labeled icon button">
                确认
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>
    <div class="ui mini test modal" id="miniFail">
        <div class="header">
            操作提示
        </div>
        <div class="content">
            <p>请按照提示完成预约！谢谢您！</p>
        </div>
        <div class="actions"> 
            <div class="ui positive right labeled icon button">
              确认
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>
</body>

</html>
